<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="~{common::header('录入需求计划')}"></head>
<body class="bg-light text-dark">
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="breadcrumb">
                <li>
                    <a>选择物资</a>
                </li>
                <li class="active">
                    录入需求计划
                </li>
                <li>
                    <a>需求计划确认</a>
                </li>
            </ul>
        </div>
    </div>


    <div class="row clearfix" style="max-height: 50%;overflow-y: auto">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-12 column ">
                    <form id="fm" method="post">
                        <table style="min-height: 200px;overflow: hidden" id="dg1" class="easyui-datagrid"
                               data-options="
                                    rownumbers:true,
                                    singleSelect:true,
                                    width:'100%'">
                            <thead>
                            <tr>
                                <th data-options="field:'ck',checkbox: true"></th>
                                <th data-options="field:'id'" hidden>Item ID(15%)</th>
                                <th data-options="field:'materialNum',width:'32%'">产品编码</th>
                                <th data-options="field:'materialName',width:'32%'">名称</th>
                                <th data-options="field:'materialUnit',width:'15%'">计量单位</th>
                                <th data-options="field:'zt',width:'15%'">状态</th>
                            </tr>
                            </thead>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="row clearfix">
        <div class="col-md-12 column">
            <hr>
        </div>
    </div>


    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="col-md-1 column">
            </div>
            <div class="col-md-10 column">
                <div class="">
                    <form class="form-horizontal" id="ff" method="post">
                        <table class="table table-striped table-condensed">
                            <tr>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="wzbm" class="control-label">物资编码</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="物资编码"  readonly name="materialCode" type="text" class="form-control" id="wzbm">
                                    </div>
                                </td>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="wzmc" class="control-label">物资名称</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="物资名称" readonly name="materialName" type="text" class="form-control" id="wzmc">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="sl" class="control-label">数量</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="数量" type="text" class="form-control" name="amount" id="sl">
                                    </div>
                                </td>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="jldw" class="control-label">计量单位</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="计量单位" readonly type="text" name="measureUnit" class="form-control" id="jldw">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="ydj" class="control-label">预单价(元)</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="预单价(元)" type="text" class="form-control" name="unitPrice" id="ydj">
                                    </div>
                                </td>
                                <td class="col-md-6">
                                    <div class="col-md-4 column">
                                        <label for="jhq" class="control-label">交货期</label>
                                    </div>
                                    <div class="col-md-8 column">
                                        <input title="交货期" type="datetime-local" class="form-control datepicker" name="jhq" id="jhq">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6" colspan="2">
                                    <div class="col-md-2 column">
                                        <label for="bz" class="control-label">备注</label>
                                    </div>
                                    <div class="col-md-10 column">
                                        <textarea class="form-control" id="bz" name="remark" style="resize:none" rows="5"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-6" colspan="2" style="text-align: right">
                                    <button type="button" class="btn btn-primary btn-sm" onclick="btn1()" style="float: left">重新选择物资</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="btn2()">保存</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="btn3()">全部需求录入完毕</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="col-md-1 column">
            </div>
        </div>
    </div>



<script th:inline="javascript">

    //选中的行索引
    var rowindex1;

    //选中的行数据;
    var rowdata1;

    $(function (){
        //初始加载数据
        var test= [[${materials}]];
        for(var i=0; i<test.length; i++){
            $("#dg1").datagrid('appendRow',
                {
                    id:test[i].id,
                    materialNum:test[i].materialNum,
                    materialName:test[i].materialName,
                    materialUnit:test[i].materialUnit,
                    zt:'未完成',
                });
        }

        //加入表单
        $("#dg1").datagrid({
            onClickRow:function (rowIndex,rowData){
                $("#wzbm").val(rowData.materialNum).removeAttr("style");
                $("#wzmc").val(rowData.materialName).removeAttr("style");
                $("#jldw").val(rowData.materialUnit).removeAttr("style");
                rowindex1=rowIndex;
                rowdata1=rowData;
            }
        })

        //表单有值时取消红框提醒
        $("form input[title]").each(function (){
            $(this).on('change',function (){
                $(this).removeAttr("style")
            })
        })


    })

    //返回上一页
    var btn1=function (){
        history.back();
    }

    //提交
    var btn2=function (){

        //判断是否提交
        var pd=true;

        //判断是否为空
        $("form input[title]").each(function (){
            if ($(this).val()==""){
                $(this).attr("style","border:1px solid red");
                pd=false;
            }
        })

        //提交
        if (pd){
            var pd2=true;
            //判断是否已经提交过了
            if (rowdata1.zt=="完成"){
                pd2=confirm("已经提交过了，是否还要提交？")
            }

            //提交
            if (pd2){
                $('#ff').form('submit', {
                    url: "/orders/insert",
                    success:function (data){
                        if (data){
                            $('#dg1').datagrid('updateRow', {
                                index: rowindex1,
                                row: {
                                    "zt": '完成'
                                }
                            });
                            rowdata1=$('#dg1').datagrid('getSelected')
                        }
                    }
                });
            }
        }
    }

    //离开
    var btn3=function (){
        var pd=true;
        $("td[field='zt'] div").each(function (index){
            if(index!=0){
                if ($(this).text()=="未完成"){
                    pd=false;
                    $(this).attr("style","color:red")
                }
            }
        })

        if (pd){
            location.href="/planman/Order_find_list.html";
        }else{
            if (confirm("还有未完成的，确定要继续吗?")){
                location.href="/planman/Order_find_list.html";
            }
        }

    }


</script>

</body>
</html>